<template>
  <div class="home">
    <!-- 导航组件 -->

    <!-- 轮播图 -->

    <div class="focusdiv">
      <el-carousel height="380px" trigger="click">
        <el-carousel-item v-for="(item, index) in swiper.RowList" :key="index">
          <el-image
            class="swiperImg"
            :src="host + item.img"
            fit="cover"
          ></el-image>
          <!-- fill / contain / cover / none / scale-down -->
          <!-- <img :src="host + item.img" :alt="host" class="swiperImg" /> -->
        </el-carousel-item>
      </el-carousel>
    </div>

    <!-- 内容 -->
    <div class="contentbg">
      <div class="hpcontentdiv">
        <!--服务型产品-->
        <div class="hpservices">
          <div class="hpservicestitle">{{ $t("msg.gloab.servicesA") }}</div>
          <div class="hpservicesdiv">
            <div
              class="hpservicesico"
              v-for="(item, index) in service.RowList"
              :key="index"
            >
              <router-link :to="item.title" class="services1">
                <el-image
                  class="image-s"
                  :src="host + item.img"
                  fit="cover"
                ></el-image>
              </router-link>
            </div>
            <div class="title-box">
              <div class="title">
                {{ $t(`msg.navbar.children.serviceA`) }}
              </div>
              <div class="title">
                {{ $t(`msg.navbar.children.serviceB`) }}
              </div>
              <div class="title">
                {{ $t(`msg.navbar.children.serviceC`) }}
              </div>
              <div class="title">
                {{ $t(`msg.navbar.children.serviceD`) }}
              </div>
              <div class="title">
                {{ $t(`msg.navbar.children.serviceE`) }}
              </div>
            </div>
          </div>
        </div>
        <div class="hpinfodiv">
          <!--新闻-->
          <div class="hpinfo1">
            <div class="infotitle">
              <div class="left85">{{ $t("msg.gloab.servicesB") }}</div>
              <div class="right15">
                <router-link to="/app/news"
                  ><img src="@/assets/more.png"
                /></router-link>
              </div>
            </div>
            <div class="hpnewsdiv">
              <div
                class="onenews"
                v-for="(item, index) in news.RowList"
                :key="index"
              >
                <p class="a"><span>-</span>{{ item }}</p>
                <!-- <p class="a" @click="goDetail(item)">
                  <span>-</span>{{ item }}
                </p> -->
              </div>
            </div>
          </div>
          <!--产品-->
          <div class="hpinfo2">
            <div class="infotitle">
              <div class="left85">{{ $t("msg.gloab.servicesC") }}</div>
              <div class="right15">
                <router-link to="/app/products"
                  ><img src="@/assets/more.png"
                /></router-link>
              </div>
            </div>
            <div class="hpprddiv">
              <div class="viewerframe">
                <div
                  class="activediv"
                  :style="{ width: 640 + 'px', left: left1 + 'px' }"
                >
                  <div
                    class="oneprd"
                    v-for="(item, index) in product.RowList"
                    :key="index"
                  >
                    <img
                      :src="host + item.img"
                      alt="经销品牌 AD"
                      title="经销品牌 AD"
                    />
                  </div>
                </div>
              </div>
            </div>
          </div>
          <!--简介-->
          <div class="hpinfo3" style="margin-right: 0px">
            <div class="infotitle">
              <div class="left85">{{ $t("msg.gloab.servicesD") }}</div>
              <div class="right15">
                <router-link to="/app/about"
                  ><img src="@/assets/more.png"
                /></router-link>
              </div>
            </div>
            <div class="hpintrodiv">
              <!-- <p>{{ company.RowList }}</p> -->
              <div v-html="company.RowList"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 底部组件 -->
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, onBeforeUnmount } from "vue";
import { useRouter } from "vue-router";
// 接口
import {
  LBT,
  ServiceProduct,
  NewsInformation,
  ProductDisplay,
  companyProfile,
} from "../../api/index";
// hoosk抽取
import { host } from "../../config/config";
import { watchSwitchLang } from "@/utils/i18n";
const router = useRouter();

let left1 = ref(0);
let swiper = reactive({
  RowList: [],
});
let service = reactive({
  RowList: [],
});
let news = reactive({
  RowList: [],
});
let product = reactive({
  RowList: [],
});
let company = reactive({
  RowList: [],
});
// 轮播图
const lBT = async () => {
  await LBT().then((res) => {
    // console.log(res.data);
    swiper.RowList = res.data.rows;
  });
};
// 服务型产品
const serviceProduct = async () => {
  await ServiceProduct().then((res) => {
    // console.log(res.data);
    service.RowList = res.data.rows;
  });
};
// 新闻资讯
const newsInformation = async () => {
  await NewsInformation().then((res) => {
    // console.log(res);
    let mode = localStorage.getItem("mode") || "content";
    console.log(mode);
    // console.log(res.data.rows);
    let contentList = [];
    res.data.rows.forEach((item) => {
      console.log(item);
      // console.log(item[mode]);
      contentList.push(item["title"]);
    });
    // console.log(contentList);
    news.RowList = contentList;
    // let data = res.data.rows.slice(0, 5);
    // news.RowList = data;
  });
};
// 新闻资讯详情
const goDetail = (details) => {
  console.log(details);
  router.push("/newsdetails");
};
// 产品展示
const productDisplay = async () => {
  await ProductDisplay().then((res) => {
    // console.log(res.data);
    product.RowList = res.data.rows;
  });
};
// 公司简介
const companyprofile = async () => {
  await companyProfile().then((res) => {
    let mode = localStorage.getItem("mode") || "content";
    console.log(mode);
    company.RowList = res.data.rows[0][mode];
    // let lang = localStorage.getItem("language") || "zh";
    // let currentlan = lang;
    // let lan = {
    //   zh: "content",
    //   en: "enContent",
    // };
    // let mode = lan[currentlan];
    // console.log(mode);
    // company.RowList = res.data.rows[0][mode];
    // if (lang == "en") {
    //   console.log(res.data.rows[0].enContent);
    //   // company.RowList = res.data.rows[0][mode];
    // } else if (lang == "zh") {
    //   company.RowList = res.data.rows[0].content;
    //   // console.log(res.data.rows[0].content);
    // }
  });
};
watchSwitchLang(companyprofile);
watchSwitchLang(newsInformation);

let timer = null;
onMounted(() => {
  // 轮播图
  lBT();
  // 服务型产品
  serviceProduct();
  // 新闻资讯
  newsInformation();
  // 产品展示
  productDisplay();
  // 公司简介
  companyprofile();

  timer = setInterval(() => {
    // console.log(left1.value);
    left1.value = left1.value - 320;
    if (left1.value == -640) {
      left1.value = 0;
    }
  }, 3000);
});
// 页面结束挂载之前清除定时器
onBeforeUnmount(() => {
  clearInterval(timer);
  timer = null;
});
</script>

<style lang="scss" scoped>
.infotitle {
  width: 100%;
  height: 32px;
  margin: 12px auto;
  overflow: hidden;
  line-height: 32px;
  font-size: 14px;
  font-weight: bold;
  color: #120d66;
  .left85 {
    width: 85%;
    overflow: hidden;
    float: left;
  }
  .right15 {
    width: 15%;
    overflow: hidden;
    float: left;
    img {
      margin-top: 8px;
    }
  }
}
.focusdiv {
  width: 1000px !important;
  height: 380px !important;
  margin: 20px auto !important;
  overflow: hidden;
  // margin: 20px 215px;
  box-shadow: 0 0 6px 5px #bbbaba49;
  background: #fff;
  z-index: 9;
  .swiperImg {
    width: 100%;
    height: 380px;
    position: absolute;
    overflow: hidden;
  }

  ::v-deep .el-carousel__indicators {
    // height: 100px;
    width: 200px;
    left: 95%;
    bottom: 10px;
    position: absolute;
    list-style: none;
    z-index: 2;
    overflow: hidden;
  }
  ::v-deep .el-carousel__indicator--horizontal {
    width: 14px;
    height: 14px;
  }
  ::v-deep .el-carousel__button {
    width: 100%;
    height: 100%;
  }
  ::v-deep .el-carousel__arrow {
    display: none;
  }
}
.contentbg {
  width: 1200px;
  overflow: hidden;
  margin: 0px auto;
  background: url(@/assets/contentbg.png);
  background-repeat: repeat-y;
  font-size: 12px;
  .hpcontentdiv {
    width: 1000px;
    background: url(@/assets/hpfenge.gif);
    background-repeat: no-repeat;
    overflow: hidden;
    margin: 0px auto;
    background-position: center top;
    .hpservices {
      width: 1000px;
      height: 236px;
      margin: 0px auto;
      overflow: hidden;
      .hpservicestitle {
        width: 100%;
        height: 32px;
        margin: 12px auto;
        overflow: hidden;
        line-height: 32px;
        font-size: 14px;
        font-weight: bold;
        color: #120d66;
      }
      .hpservicesdiv {
        width: 900px;
        height: 185px;
        overflow: hidden;
        margin: 0px auto;
        .title-box {
          width: 875px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          .title {
            width: 157px;
            height: 40px;
            line-height: 40px;
            text-align: center;
            font-size: 10px;
          }
        }
        .hpservicesico {
          width: 180px;
          height: 140px;
          float: left;
          display: inline;
          text-align: center;

          .services1 {
            width: 158px;
            height: 140px;
            overflow: hidden;

            background-position: top center;
            display: block;
            .image-s {
              width: 100%;
              height: 140px;
            }
          }
        }
      }
    }
  }
  .hpinfo1 {
    width: 300px;
    margin-right: 40px;
    float: left;
    overflow: hidden;
    .hpnewsdiv {
      width: 100%;
      overflow: hidden;
      margin-top: 12px;
      margin-bottom: 30px;
      .onenews {
        width: 100%;
        height: 24px;
        overflow: hidden;
        line-height: 24px;
      }
    }
  }
  .hpinfo2 {
    width: 320px;
    margin-right: 40px;
    float: left;
    overflow: hidden;
    .hpprddiv {
      width: 320px;
      height: 120px;
      overflow: hidden;
      .viewerframe {
        width: 320px;
        height: 120px;
        float: left;
        overflow: hidden;
        position: relative;
        .activediv {
          transition: left 1s;
          height: 120px;
          position: absolute;
          top: 0px;
          left: 0px;
          .oneprd {
            width: 160px;
            height: 60px;
            overflow: hidden;
            float: left;
            text-align: center;
          }
        }
      }
    }
  }
  .hpinfo3 {
    width: 300px;
    margin-right: 20px;
    float: left;
    overflow: hidden;
    .hpintrodiv {
      width: 100%;
      overflow: hidden;
      margin-top: 12px;
      margin-bottom: 30px;
      text-indent: 2em;
    }
  }
}
.services1:link {
  background-position: top center;
}
a:link {
  color: #120d66;
  text-decoration: none;
}
.a:hover {
  color: red;
  cursor: pointer;
}
</style>
